<template>
  <div class="income-container">
    <!-- 头部导航 -->
    <div class="header">
      <div class="left">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="title">我的收入</div>
      <div class="right">
        <span class="detail-text" @click="goToOrderDetail2">订单明细</span>
      </div>
    </div>

    <!-- 月收入展示 -->
    <div class="month-income">
      <div class="month-title">二月收入（税前）</div>
      <div class="amount">¥{{ formatMoney(totalIncome) }}</div>
    </div>

    <!-- 累计数据 -->
    <div class="total-data">
      <div class="blue-bar"></div>
      <div class="title">累计数据</div>
      <div class="data-content">
        <div class="data-item">
          <div class="value">{{ totalOrders }}</div>
          <div class="label">总订单数</div>
        </div>
        <div class="data-item">
          <div class="value">¥{{ formatMoney(totalIncome) }}</div>
          <div class="label">总收入</div>
        </div>
      </div>
    </div>

    <!-- 结算记录 -->
    <div class="settlement-record">
      <div class="blue-bar"></div>
      <div class="title">结算记录</div>
      <div class="record-list">
        <div v-for="(item, index) in incomeList" :key="index" class="record-item" @click="goToOrderDetail(item)">
          <div class="month-info">
            <div class="month">{{ item.month }}月</div>
            <div class="year">{{ item.year }}年</div>
          </div>
          <div class="order-info">
            <div class="income">收入 ¥{{ formatMoney(item.sum) }}</div>
            <div class="sub-info">
              <span class="order-count">订单数 {{ item.count }}</span>
              <span class="settlement-time">结算时间 {{ item.settlementTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderDetails, getMyIncomeList, getTotal, getOrderList } from '@/api/myincome/myincome'

export default {
  data() {
    return {
      totalIncome: 0,
      totalOrders: 0,
      incomeList: []
    }
  },
  created() {
    this.getIncomeData()
    this.getTotalData()
    // this.getOrderListData()
  },
  methods: {
    // 添加金额格式化方法
    formatMoney(value) {
      const num = parseFloat(value || 0)
      return num.toFixed(2)
    },

    // 获取收入列表
    async getIncomeData() {
      try {
        const res = await getMyIncomeList()
        console.log('收入列表数据:', res)
        // 确保数据类型正确
        this.incomeList = (res || []).map(item => ({
          ...item,
          income: parseFloat(item.sum || 0),
          orderCount: parseInt(item.count || 0)
        }))
      } catch (error) {
        console.error('获取收入列表失败:', error)
      }
    },
    // 获取总计数据
    async getTotalData() {
      try {
        const res = await getTotal()
        console.log('总计数据:', res)
        if (res) {
          this.totalIncome = parseFloat(res.sum || 0)
          this.totalOrders = parseInt(res.count || 0)
        }
      } catch (error) {
        console.error('获取总计数据失败:', error)
      }
    },
    // // 获取订单列表
    // async getOrderListData() {
    //   try {
    //     const res = await getOrderList({
    //       year: item.year,
    //       month: item.month
    //     })
    //     console.log('订单列表数据:', res)
    //     // 处理订单列表数据
    //   } catch (error) {
    //     console.error('获取订单列表失败:', error)
    //   }
    // },
    // 跳转到订单明细页面
    goToOrderDetail(item) {
      this.$router.push({
        path: '/myincome/details',
        query: {
          year: item.year,
          month: item.month
        }
      })
    },
    goToOrderDetail2() {
      this.$router.push({
        path: '/myincome/details2',
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.income-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  background: #fff;
  border-bottom: 1px solid #eee;

  .title {
    font-size: 17px;
    font-weight: 500;
  }

  .detail-text {
    color: #409EFF;
    font-size: 14px;
  }
}

.month-income {
  background: linear-gradient(to right, #ff6b6b, #ff8585);
  color: #fff;
  padding: 20px;
  text-align: center;

  .month-title {
    font-size: 14px;
    opacity: 0.9;
  }

  .amount {
    font-size: 36px;
    font-weight: bold;
    margin-top: 10px;
  }
}

.total-data, .settlement-record {
  background: #fff;
  margin-top: 10px;

  .blue-bar {
    width: 3px;
    height: 16px;
    background: #409EFF;
    position: absolute;
    left: 0;
    margin: 15px 0 0 15px;
  }

  .title {
    font-size: 15px;
    font-weight: 500;
    padding: 15px 15px 15px 25px;
  }
}

.total-data {
  .data-content {
    display: flex;
    padding: 15px;
    border-top: 1px solid #f5f5f5;

    .data-item {
      flex: 1;
      text-align: center;

      .value {
        font-size: 20px;
        color: #333;
        margin-bottom: 5px;
      }

      .label {
        font-size: 14px;
        color: #666;
      }
    }
  }
}

.settlement-record {
  .record-item {
    display: flex;
    padding: 15px;
    border-top: 1px solid #f5f5f5;
    cursor: pointer;

    &:active {
      background-color: #f9f9f9;
    }

    .month-info {
      width: 80px;
      color: #409EFF;

      .month {
        font-size: 16px;
        font-weight: 500;
      }

      .year {
        font-size: 12px;
        margin-top: 5px;
      }
    }

    .order-info {
      flex: 1;

      .income {
        font-size: 15px;
        color: #333;
        margin-bottom: 8px;
      }

      .sub-info {
        font-size: 12px;
        color: #999;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
